<template>
    <div>
        <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm">
            <el-form-item prop="phone" class="phone">
                <!-- <el-input size="small"
                        v-model="loginForm.phone"
                        autocomplete="off"
                        :placeholder="$t('login.phone')">
                    <i slot="prefix"
                    class="icon-shouji"></i>
                </el-input> -->
                <el-input auto-complete="off" v-model="loginForm.phone" placeholder="请输入手机号码">
                </el-input>
                <img :src="require('@/assets/imgs/login/phone.png')" />
            </el-form-item>
            <el-form-item prop="code" class="code-form-item">
                <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码">
                </el-input>
                <div class="code-num">
                    <span class="send_code" @click="handleSend(loginForm.phone)" v-show="sendCodeFlag">
                        发送验证码
                    </span>
                    <span class="send_code1" v-show="!sendCodeFlag">
                        {{ timer }}s重新获取
                    </span>
                </div>
                <img :src="require('@/assets/imgs/login/code.png')" />
            </el-form-item>
            <el-form-item prop="pass" class="psd">
                <!-- <el-input size="small"
                          type="password"
                        v-model="loginForm.pass"
                        autocomplete="off"
                        :placeholder="$t('forgetPass.resetPWD')"
                        show-password>
                    <i slot="prefix"
                    class="icon-mima"></i>
                </el-input> -->
                <el-input auto-complete="off" v-model="loginForm.pass" type="password" placeholder="请输入重置密码">
                </el-input>
                <img :src="require('@/assets/imgs/login/psd.png')" />
            </el-form-item>
            <el-form-item prop="rePass" class="reset">
                <!-- <el-input size="small"
                        type="password"
                        v-model="loginForm.rePass"
                        autocomplete="off"
                        :placeholder="$t('forgetPass.twoResetPWD')"
                        show-password>
                    <i slot="prefix"
                    class="icon-mima"></i>
                </el-input> -->
                <el-input auto-complete="off" type="password" v-model="loginForm.rePass" placeholder="请二次输入重置密码">
                </el-input>
                <img :src="require('@/assets/imgs/login/reset.png')" />
            </el-form-item>
            <el-form-item>
                <!-- <el-button size="small"
                        type="primary"
                        @click.native.prevent="submit(btnTextBySts)"
                        class="login-submit">{{btnTextBySts}}
                </el-button> -->
                <el-button @click.native.prevent="submit(btnTextBySts)" class="login-btn" type="primary">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { isvalidatemobile } from "@/util/validate";
import { mapGetters } from "vuex";
import { getValidateCode, resetPass } from '@/api/user';
import md5 from 'js-md5'
export default {
    name: 'forgetPass',
    data() {
        const validatePhone = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(isvalidatemobile(value)[1]));
            } else {
                callback();
            }
        };
        const validateCode = (rule, value, callback) => {
            if (value.length != 6) {
                callback(new Error(this.$t('forgetPass.errorVerCode')));
            } else {
                callback();
            }
        };
        return {
            msgText: "",
            msgTime: "",
            msgKey: false,
            btnTextBySts: this.$t('forgetPass.submitCodeBtn'),
            isValidCode: false,  //验证码是否验证成功
            loginForm: {
                phone: "",
                code: "",
                pass: "",
                rePass: ""
            },
            loginRules: {
                phone: [{ required: true, trigger: "change", validator: validatePhone }],
                code: [{ required: true, trigger: "change", validator: validateCode }],
                pass: [{ required: true, trigger: "change" }],
                rePass: [{ required: true, trigger: "change", validator: this.rePassValid }]
            },
            sendCodeFlag: true,
            timer: 60,
            msgFlag: false

        }
    },
    created() {
        this.msgText = this.config.MSGINIT;
        this.msgTime = this.config.MSGTIME;
    },
    computed: {
        ...mapGetters(["tagWel"]),
        config() {
            return {
                MSGINIT: this.$t("login.msgText"),
                MSGSCUCCESS: this.$t("login.msgSuccess"),
                MSGTIME: 30
            };
        }
    },
    methods: {
        rePassValid() {
            return this.loginForm.pass === this.loginForm.rePass ? true : false;
        },
        // handleSend(mobile) {
        //     if (this.msgKey) return;
        //     if (!this.loginForm.phone){
        //         this.$message({
        //             title: this.$t('deletePrompt.Error'),
        //             message: this.$t('forgetPass.hintSentSuccess'),
        //             type: 'error'
        //         });
        //     }
        //     getValidateCode(mobile).then(res => {
        //         this.$message({
        //             title:this.$t('deletePrompt.successTitle'),
        //             message:this.$t('forgetPass.hintSentSuccess'),
        //             type: 'success'
        //         });
        //         this.msgText = this.msgTime + this.config.MSGSCUCCESS;
        //         this.msgKey = true;
        //         this.isValidCode = true;
        //         this.btnTextBySts = this.$t('forgetPass.loginAgainBtn');

        //         const time = setInterval(() => {
        //             this.msgTime--;
        //             this.msgText = this.msgTime + this.config.MSGSCUCCESS;
        //             if (this.msgTime == 0) {
        //                 this.msgTime = this.config.MSGTIME;
        //                 this.msgText = this.config.MSGINIT;
        //                 this.msgKey = false;
        //                 clearInterval(time);
        //             }
        //         }, 1000);
        //     })
        // },
        submit(name) {
            let params = {};
            params.mobile = this.loginForm.phone;
            params.code = this.loginForm.code;
            //判断二次输入的验证码是否一样
            if (!this.msgFlag) {
                this.$message.error('手机号或验证码输入有误')
                return
            }
            if (!(this.loginForm.pass == this.loginForm.rePass)) {
                this.$message.error('两次密码输入不一致')
                return;
            }
            params.password = md5(this.loginForm.pass)
            resetPass(params).then(res => {
                if (res.data.code == 0) {
                    this.$message.success('操作成功')
                    setTimeout(() => {
                        this.$parent.init()
                    }, 1000);
                }
            })

        },
        handleSend(mobile) {
            //判断手机号码是否为空
            if (!mobile) {
                this.$message.error('手机号码不能为空')
                return
            }
            this.msgFlag = false
            getValidateCode(mobile).then(res => {
                if (res.status == 200) {
                    this.$message.success('操作成功')
                    this.msgFlag = true
                    this.sendCodeFlag = !this.sendCodeFlag
                    const time = setInterval(() => {
                        this.timer--
                        if (this.timer == 0) {
                            clearInterval(time)
                            this.sendCodeFlag = true
                        }
                    }, 1000)
                } else {
                    this.$message.error('操作失败')
                }
            })
        }
    }
}
</script>
<style scoped>
.msg-text {
    display: block;
    width: 60px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}
.login-form .el-form-item{
    margin-bottom: 20px!important;
    position: relative;
}
.phone img,
.reset img,
.psd img,
.code-form-item img{
  position: absolute;
  top: 10px;
  left: 30px;
  width: 26px;
  height: 30px;
}
.phone img{
  width: 24px;
  height: 30px;
}
.reset img{
  width: 24px;
  height: 24px;
}
.code-form-item .code-num{
    position: absolute;
    right: -4px;
    bottom: 9px;
}
.send_code,
.send_code1 {
    padding: 10px 20px;
    font-size: 14px;
    color: #4371E4;
}

.send_code:hover {
    cursor: pointer;
}

.send_code1:hover {
    cursor: not-allowed;
}

.login-btn {
    width: 100%;
    height: 50px;
    font-size: 16px;
    background-color: #4371E4;
    border-color: #4371E4;
  
}

::v-deep .login-btn:hover {
    opacity: .9;
}
</style>